<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElLoading, ElMessage} from "element-plus";

const headers = {
  Authorization: localStorage.getItem("auth")
}
//选择的当前发行方
const currentIssuer = ref({});
//定义表格的引用
const issuerTableRef = ref();
//发行方相关数据加载中
const Loading = ref(true);


const issuerLoading = ref(false);
const issuer = ref([]);
//从接口获取发行方数据
const getIssuer = () => {
  Loading.value = true;
  axios.get("/api/issuer",
  {headers}).then(response => {
      console.log(response.data.value);
      issuer.value = response.data.value;
    Loading.value = false;
    }).catch(error => {
      console.log("获取失败", error.response);
    Loading.value = false;
    })
}
getIssuer();

//表示单击行
const handleRowClick = row => {
  issuerTableRef.value.data.forEach(r => {
    issuerTableRef.value.toggleRowSelection(r, r.id == row.id);
  })
  currentIssuer.value = row;
}
//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
  if (multipleSelection.value.length == 1) {
    currentIssuer .value = multipleSelection.value[0];
  } else {
    currentIssuer .value = {};
  }
}
//控制新增/修改发行方对话框是否显示
const dialogEditIssuerVisible = ref(false);

//新增按钮点击事件
const addIssuer = () => {
  currentIssuer.value = {
    id:0,
  };
  dialogEditIssuerVisible.value = true;
}

const saveIssuer = () => {
   issuerLoading.value=true
  axios.post("/api/issuer/save", currentIssuer.value, {
   headers}
).then(response => {
    console.log("保存成功");
    issuerLoading.value=false;
    dialogEditIssuerVisible.value = false;
    getIssuer();
    ElMessage({
      message: "保存成功",
      type: 'success',
    })
  }).catch(error => {
    issuerLoading.value=false;
    ElMessage({
      message: "保存失败,请检查内容",
      type: 'warning',
    })
  })
}



//修改按钮点击事件
const updateIssuer = () => {
  dialogEditIssuerVisible.value = true;
}

const deleteIssuer = () => {
  multipleSelection.value.forEach(issuer => {
    issuerLoading.value = true;
    axios.get("/api/issuer/delete?id="+issuer.id, {headers}).then(response => {
      getIssuer();
      issuerLoading.value = false;
    }).catch(error => {
      console.log("删除失败", error.response);
      issuerLoading.value = false;
      ElMessage({
        message: error.response.data.message,
        type: 'warning',
      })
    })
  })
}

</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>藏品中心</el-breadcrumb-item>
    <el-breadcrumb-item>发行方管理</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
      </div>
      <div>
              <el-button type="primary" @click="addIssuer" >新增</el-button>
        <el-button type="default" @click="updateIssuer" :disabled="multipleSelection.length != 1">修改</el-button>
        <el-popconfirm title="确认删除吗？"
                       confirm-button-text="是"
                       cancel-button-text="否"
                       @confirm="deleteIssuer">
          <template #reference>
            <el-button type="warning" :disabled="multipleSelection.length == 0" :loading="issuerLoading">删除</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
    <div>
      <template v-if="issuer!= null">
      <el-table :data="issuer"
                v-loading="Loading"
                row-key="id"
                ref="issuerTableRef"
                @current-change="handleRowClick"
                @selection-change="handleSelectionChange"
                stripe
                highlight-current-row
                empty-text="暂无数据"
                style="width: 100%">
        <el-table-column type="selection" />
        <el-table-column prop="id" label="ID"/>
        <el-table-column prop="name" label="发行方名称"/>
      </el-table>
      </template>
    </div>
  </div>
  <el-dialog
      v-model="dialogEditIssuerVisible"
      :title="(currentIssuer.id == 0 ? '新增' : '修改') + '发行方'"
      width="400" align-center>
      <tr>
        <td>发行方ID:</td>
        <td>
          <el-input v-model="currentIssuer.id" :disabled="true"/>
        </td>
      </tr>
      <tr>
        <td>发行方名称:</td>
        <td>
          <el-input v-model="currentIssuer.name"/>
        </td>
      </tr>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogEditIssuerVisible = false">取消</el-button>
        <el-button type="primary" @click="saveIssuer" :loading="issuerLoading">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>